Component({
  properties: {
    //百分比 0-100
    percent: {
      type: [Number,String],
      value: 0,
      observer(val) {
        this.darwProgress()
      }
    },
    //右侧是否显示百分比
    showInfo: {
      type: Boolean,
      value: false
    },
    //圆角大小
    radius: {
      type: String,
      value: '8rpx'
    },
    //右侧百分比字体大小 rpx
    size: {
      type: Number,
      value: 28
    },
    //右侧百分比颜色
    color: {
      type: String,
      value: '#333'
    },
    //右侧百分比宽度
    percentWidth: {
      type: Number,
      value: 96
    },
    //百分比是否需要递增动画
    animation: {
      type: Boolean,
      value: true
    },
    //进度条线条宽度 rpx
    width: {
      type: Number,
      value: 8
    },
    //已选进度条颜色,可渐变
    activeColor: {
      type: String,
      value: '#5677fc'
    },
    //未选择的进度条的颜色
    backgroundColor: {
      type: String,
      value: '#EBEBEB'
    },
    //backwards: 动画从头播；forwards：动画从上次结束点接着播
    activeMode: {
      type: String,
      value: 'forwards'
    },
    //进度增加1%所需毫秒数
    duration: {
      type: Number,
      value: 15
    }
  },
  data: {
    percentage: 0,
    timer: null
  },
  lifetimes: {
    ready: function () {
      this.darwProgress()
    }
  },
  methods: {
    darwProgress() {
      clearInterval(this.data.timer);
      this.data.timer = null;
      let start = 0;
      if (this.data.activeMode === 'forwards' && this.data.percentage < Number(this.data.percent)) {
        if (Number(this.data.percent) < this.data.percentage) {
					//如果传入的百分比比之前的数值小，则重新开始
          this.setData({
            percentage:0
          })
				}
        start = this.data.percentage;
      }
      let decimalNum= Number(this.data.percent) - parseInt(this.data.percent);
      let percentage = start;
      this.setData({
        percentage:percentage
      })
      this.data.timer = setInterval(() => {
        if (percentage+decimalNum >= Number(this.data.percent)) {
          if(percentage!=Number(this.data.percent)){
            this.setData({
              percentage:Number(this.data.percent)
            })
          }
          clearInterval(this.data.timer);
          this.data.timer = null;
          //动画完成事件
          this.triggerEvent('activeend', {})
          return;
        }
        percentage+= 10;
        this.setData({
          percentage:percentage
        })
      }, this.data.duration)
    }
  }
})